<!--
 * @description  : 市管-工作日志列表
 * @descriptionDetail: 市管-工作日志列表
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon" @tap="handlerAddLog">
        添加
      </view>
    </theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="content u-page">
      <view class="tabsBottom">
        <u-sticky>
          <u-cell-group class="sticky-header">
            <u-cell-item icon="calendar" title="开始/结束日期" :value="rangeDate" :arrow="true" @tap="dateRange=true">
            </u-cell-item>
          </u-cell-group>
        </u-sticky>
        <me-table
          :i="0"
          :index="0"
          :top="90"
          :load-data="loadData"
          :init-load="true"
          ref="mescrollItem0"
        >
          <day-log-item :dayLog="d.data" slot-scope="d" @click="handlerLogDetail(d.data)"></day-log-item>
        </me-table>
      </view>
    </view>
    <u-calendar mode="range" max-date="2099-12-31" v-model="dateRange" @change="handlerSearchDate"></u-calendar>
    <!-- 工作日志详情 -->
    <u-popup mode="bottom" height="100%" border-radius="16" v-model="logDayOpen">
      <add-log-day :dayLog="logDayInfo" @back="handlerBack"></add-log-day>
    </u-popup>
  </view>
</template>

<script>
	import meTable from '@/components/me-table.vue'
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import checkService from "@/service/check/check.service"
	import {
		dateUtils,
	} from "@/common/util"
	import dayLogItem from "./components/day-log-item.vue"
	import addLogDay from "./addLogDay.vue"
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			meTable,
			dayLogItem,
			addLogDay,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				user: this.$storage.get(this.$rp.common.USER),
				dateRange: false,
				rangeDate: dateUtils.getStartDayOfWeek() + "至" + dateUtils.getEndDayOfWeek(),
				startDate: dateUtils.getStartDayOfWeek(),
				endDate: dateUtils.getEndDayOfWeek(),
				isOpen: false,
				logDayOpen: false,
				logDayInfo: {}, // 点击的工作日志
				fContent: [{
					iconPath: require('@/static/add.png'),
					selectedIconPath: require('@/static/add.png'),
					text: '添加',
					active: false,
				}],
			};
		},
		// 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
		mounted() {
			this.setRightBtns();
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("添加", () => {
					this.handlerAddLog();
					this.setRightBtns();
				}, true, true);
				// #endif
			},

			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerAddLog();
				}
			},
			// 添加日志
			handlerAddLog() {
				this.$u.loading("添加日志中...");
				checkService.mlogSave().then(dr => {
					this.$u.hideLoading();
					if (dr.success) {
						this.$u.toast("添加成功");
						this.$refs['mescrollItem0'].refresh();
					} else {
						this.$u.toast(dr.msg);
					}
				});
			},
			// 点击查看日志详情
			handlerLogDetail(logDetail) {
				this.logDayInfo = logDetail;
				this.logDayOpen = true;
			},
			// 关闭日志弹窗
			handlerBack(isRefresh) {
				this.logDayOpen = false;
				isRefresh && this.$refs['mescrollItem0'].refresh();
			},
			// 日志
			loadData(page) {
				return checkService.myMlogList(page.num, page.size, {
					orgUuid: this.user.user.depart.orgUuid,
					logDateBegin: this.startDate,
					logDateEnd: this.endDate,
				});
			},
			// 日期区间查询条件
			handlerSearchDate(d) {
				this.startDate = d.startDate;
				this.endDate = d.endDate;
				this.rangeDate = d.startDate + "至" + d.endDate;
				this.$refs["mescrollItem0"].refresh();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/style/common/rightMenu.scss";

	.content {
		background-color: #FFF;
	}

	.sticky-header {
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 40px;
		/* #endif */
		width: 100%;
		z-index: 999;
	}

	/deep/ .u-tabbar__content__item__text {
		font-size: 15px;
	}
</style>
